<template>
  <div>
    <el-row style="margin-bottom:20px;display:flex;justify-content:space-between">
      <el-input placeholder="仪器设备名称" style="width:20%;margin-right:10px" v-model="searchData.ep_ename" clearable></el-input>
      <el-input placeholder="管理编号" style="width:20%;margin-right:10px" v-model="searchData.managenum" clearable></el-input>
      <el-date-picker v-model="jddate" clearable style="margin-right:15px;width:20%" type="daterange"
        rangeSeparator="至" startPlaceholder="计划检定/校准开始" endPlaceholder="计划检定/校准结束" valueFormat="yyyy-MM-dd"
      ></el-date-picker>
      <el-select v-model="searchData.status" placeholder="检定状态" style="margin-right:20px;width:20%" clearable>
        <el-option v-for="item in checkstatusArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button size="mini" type="primary" @click="getschedulelist(1)">搜索</el-button>
    </el-row>
    <el-row>
      <el-button size="mini" type="primary" @click="addeqschedule">新增设备检定</el-button>
      <el-button size="mini" type="primary" @click="editeq">编辑</el-button>
      <el-button size="mini" type="danger" @click="deleteeq">删除</el-button>
      <el-button size="mini" type="info" @click="daochu">导出</el-button>
      <el-button size="mini" type="primary" @click="print">打印</el-button>
    </el-row>
    <el-divider></el-divider>
    <scheduletable :schedulelist="schedulelist" :usertype="1" :pagobj="pagobj"
      :choosedp.sync="choosedp"
      :ismanager="1"
    ></scheduletable>
    <scheduletable v-show="false" :schedulelist="schedulelistnew" v-if="schedulelistnew.length>0" :usertype="1"
      :pagobj="pagobj"
      :choosedp.sync="choosedp" :ismanager="1" id="tableExcel"
    ></scheduletable>
    <editeq :editData="editData" v-if="isediteq"></editeq>
    <addschedule v-if="isshowadd"></addschedule>
    <el-dialog title :visible.sync="innerVisible22" appendToBody width="100%"
      top="100px" center
    >
      <el-button type="primary" size="small" style @click="doprintTwo">打印</el-button>
      <div id="printrecordTwo">
        <div style="width:100%;padding:20px 10px 10px 10px" v-for="(item,index) in shrecordData" :key="index">
          <p style=" width:100%;display: grid;grid-template-columns:90% 10%;margin-bottom:10px;;">
            <span style="font-size:15px;">PASS</span>
            <span style="font-size:15px;">JL</span>
          </p>
          <div>
            <p style="margin-bottom:10px;">
              <span>
                <span style="font-size:2px">器具编号：</span>
                <span style="font-size:2px">{{item.hash.managenum}}</span>
              </span>
            </p>

            <p style="display: grid;grid-template-columns:50% 50%;font-size:2px;margin-bottom:10px;">
              <span>
                <span style="font-size:2px">检定日期：</span>
                <span style="font-size:2px">{{item.hash.realtime}}</span>
              </span>
            </p>
            <p style="width:100%;display: grid;grid-template-columns:50% 50%;font-size:2px;margin-bottom:10px;">
              <span>
                <span style="font-size:2px">有效日期：</span>
                <span style="font-size:2px">{{item.hash.nextverifiytime}}</span>
              </span>
              <span>
                <span style="font-size:2px">检定员：</span>
                <span style="font-size:2px">{{item.hash.verifiy_person}}</span>
              </span>
            </p>
            <p style="display: grid;grid-template-columns:50% 50%;font-size:2px;margin-bottom:10px;">
              <span style="text-align:left;">
                <span style="text-align:left;font-size:2px">检定单位：</span>
                <span style="text-align:left;font-size:2px">{{item.hash.verifiy_company}}</span>
              </span>
            </p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import scheduletable from '~/components/apparatus/eqschedule/scheduletable.vue';
import editeq from '~/components/apparatus/eqschedule/editeq.vue';
import addschedule from '~/components/apparatus/eqschedule/addschedule.vue';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

export default {
  components: {
    scheduletable,
    editeq,
    addschedule,
  },
  data() {
    return {
      ts: this.newStore(),
      isediteq: false,
      isshowadd: false,
      jddate: [],
      swage: '',
      wdate: '',
      searchData: {},
      schedulelist: [],
      schedulelistnew: [],
      editData: {},
      shrecordData: [],
      choosedp: [],
      checkstatusArr: [
        {
          label: '已提交证书',
          value: '1',
        },
        {
          label: '未提交证书',
          value: '0',
        },
        {
          label: '无需确认',
          value: '2',
        },
      ],
      pagobj: {
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },
      innerVisible22: false,
    };
  },
  mounted() {
    this.getyear();

    // this.getschedulelist();
    // this.getschedulelist2();
  },
  methods: {
    getyear() {
      const time = new Date();
      const year = time.getFullYear();
      this.jddate = [`${year}-01-01`, `${year}-12-31`];
      console.log('1111111');
    },
    // 删除设备
    deleteeq() {
      if (this.choosedp.length == 0) {
        this.$message({
          type: 'info',
          message: '请先勾选设备',
        });
        return;
      }
      const deletearr = [];
      for (let i = 0; i < this.choosedp.length; i += 1) {
        deletearr.push(this.choosedp[i].hash.id);
      }
      // console.log(deletearr, '2132');

      this.$confirm('确认删除已选择的设备?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const req = {
            handle:
              'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7A2C227A657B632AEDF83A87A369653E1B',
            id: deletearr,
          };
          this.spost(this.ts, '/mainservlet', req).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功',
            });
            this.getschedulelist();
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
    // 编辑人员
    editeq() {
      if (this.choosedp.length == 0) {
        this.$message({
          type: 'info',
          message: '请先勾选设备',
        });
        return;
      }
      if (this.choosedp.length > 1) {
        this.$message({
          type: 'info',
          message: '只能编辑一个设备',
        });
        return;
      }
      const req = {
        handle:
          'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7A03662FFAE5492540A52885BC247C5A4B',
        id: this.choosedp[0].hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.editData = ts.d.data.operation1[0].hash;
        this.reload('isediteq');
      });
    },
    getschedulelist(p) {
      if (p) {
        this.pagobj.currentPage3 = p;
      }
      if (this.jddate == null) {
        this.jddate = ['', ''];
      }


      const req = this.searchData;
      req.handle =
        'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7A4BDCEC5DB08E43DBCD3A43E9777C4E90';
      [req.verifiytime_begin] = [this.jddate[0]];
      [req.verifiytime_end] = [this.jddate[1]];
      req.start = (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize;
      req.limit = this.pagobj.pagesize;

      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.schedulelist = ts.d.data.operation1;

        this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
        // this.getschedulelist2();
      });
    },

    // 点击新增人员
    addeqschedule() {
      this.reload('isshowadd');
    },
    // 公共组件刷新方法
    reload(partsname) {
      this[partsname] = false;
      this.$nextTick(() => {
        this[partsname] = true;
      });
    },
    // 导出功能
    daochu() {
      if (this.jddate == null) {
        this.jddate = ['', ''];
      }
      const req = this.searchData;
      req.handle =
        'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7A4BDCEC5DB08E43DBCD3A43E9777C4E90';
      [req.verifiytime_begin] = [this.jddate[0]];
      [req.verifiytime_end] = [this.jddate[1]];
      req.start = (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize;
      req.limit = 10000;
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.schedulelistnew = ts.d.data.operation1;
        // this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
        setTimeout(this.savetoxls, 1000);
      });
    },
    savetoxls() {
      if (this.schedulelistnew.length == 0) {
        this.$message({
          type: 'error',
          message: '导出数据为空,无法导出',
        });
        return false;
      }

      const xlsxParam = { raw: true }; // 转换成excel时，使用原始的格式
      /* generate workbook object from table */
      const wb = XLSX.utils.table_to_book(
        document.querySelector('#tableExcel'),
        xlsxParam,
      );
      console.log(wb);
      /* get binary string as output */
      const wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array',
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }),
          'sheetjs.xlsx',
        );
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
      }
      return wbout;
    },
    print() {
      this.shrecordData = [];
      const arr1 = [];
      let list = '';
      if (this.choosedp.length == 0) {
        this.$message({
          type: 'info',
          message: '请先勾选维修记录',
        });
        return;
      }
      for (let i = 0; i < this.choosedp.length; i += 1) {
        arr1.push(this.choosedp[i].hash.id);
        list = arr1.join(',');
      }
      // if (this.choosedp[i].hash.status != "040301") {
      //   this.$message({
      //     type: "info",
      //     message: "只有正常状态才能打印"
      //   });
      //   return;
      // }

      const req = {
        handle:
          'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7AF79E73FB99A230BC89A1ABDA7A3F3EF6',
        id: list,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d.data.operation1, 'ts.data.data');
        this.shrecordData = ts.d.data.operation1;
        this.innerVisible22 = true;
      });
    },
    doprintTwo() {
      this.$nextTick(() => {
        const detailContent = document.getElementById('printrecordTwo');
        Print('#printrecordTwo');
      });
    },
  },
};
</script>
